﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>The jqxColorPicker widget allows you to easily pick a color.
    </title>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = '';
                // Create jqxColorPicker widgets.
                $("#jqxColorPicker").jqxColorPicker({ width: '250', height: '250', theme: theme });
                $("#hueMode").jqxRadioButton({ width: '150', height: '25', theme: theme });
                $("#saturationMode").jqxRadioButton({ checked: true, width: '150', height: '25', theme: theme });
                $("#hueMode").bind('change', function (event) {
                    if (event.args.checked) {
                        $("#jqxColorPicker").jqxColorPicker({ colorMode: 'hue' });
                    }
                    else {
                        $("#jqxColorPicker").jqxColorPicker({ colorMode: 'saturation' });
                    }
                });
                $("#jqxColorPicker").bind('colorchange', function (event) {
                    $("#colorlog").html("Color: #" + event.args.color.hex);
                });
            });
        </script>
        <div id='jqxWidget'>
            <div id="jqxColorPicker">
            </div>
            <div style="margin-top: 10px;">
                <div style="margin-bottom: 5px;">Color Modes</div>
                <div id="saturationMode">Saturation Color Mode</div>
                <div id="hueMode">Hue Color Mode</div>
            </div>
            <div style="font-family: Verdana; font-size:13px;" id="colorlog"></div>
        </div>
    </div>
</body>
</html>
